<template>
  <div>

  </div>
  <div class="card-content">
    <Card
      v-for="(item, index) in cardList"
      :key="index"
      :title="item.title"
      :remark="item.remark"
      @click="goToTrain(item.id)"
    />
  </div>
</template>
<script setup lang="ts">
import Card from "@renderer/components/card/card.vue";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router"; // 添加这一行以导入 useRouter
const router = useRouter();
const vlcContainer = ref(null);
const cardList = ref([
  {
    id: 1,
    title: "无人教育",
    remark:
      "自动识别教室在场工人人脸，自动签到、根据岗位自动匹配课程、自动播放",
  },
  {
    id: 2,
    title: "专题教育",
    remark:
      "现场管理人员自行选择某个课程包,课程开始播放，同时开始识别在场工人并记学时",
  },
  {
    id: 3,
    title: "通用教育",
    remark:
      "现场管理人员自行组织教育（宣讲PPT、讲话教育等）,不依托系统内培训素材，可应用系统进行签到和学时记录",
  },
]);

function goToTrain(id: number) {
  switch (id) {
    case 1:
      router.push("/train");
      //路由到结束页面
      // router.push("/play-end");
      break;
    case 2:
      router.push("/thematic-education");
      break;
    case 3:
      router.push("/general-education");
      break;
  }
}

onMounted(() => {});
</script>

<style scoped lang="scss">
.card-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}
</style>
